import React from 'react'
import { Modal} from 'antd'
import Table from '../../components/Table'
import 'whatwg-fetch'
import API from '../../axios/api'

require('es6-promise').polyfill();

const columns = [
    { dataIndex: 'AvatarUrl', title: '头像', width: 80,render: (text, record) =>  <img src={text} height="35" width="35" /> },
    { dataIndex: 'NickName', title: '昵称', width: 180,},
    { dataIndex: 'RealName', title: '用户名', width: 100,},
    { dataIndex: 'WXQRCode', title: '微信号', width: 140,},
    { dataIndex: 'CellPhone', title: '手机号', width: 140,},
    { dataIndex: 'RudderName', title: '分舵名称', width:100,},
    { dataIndex: 'HallName', title: '班级名称', width: 150,},
    { dataIndex: 'RankTypeString', title: '角色',},
]

export default class SalesDetailList extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            tData: [],
            item: {},
            loading: true,
        }
    }

    // 获取表格数据
    fetchTableData =  async (id,RudderId) => {
        let parms = {
            ...API.config,
            RankType: -1,
            HallId:  id,
            RudderId:RudderId
        }
        await API.fetchUserList(parms).then((res) => {
            if(res.Code === 200) {
                console.log(res.Data)
                this.setState({
                    tData: res.Data.List
                });
            }
            this.setState({
                loading: false
            });
        })
    }

    componentWillReceiveProps(nextProps, nextContext) {
        if(this.state.Id !== nextProps.Id){
            this.setState({
                Id: nextProps.Id,
                RudderId:nextProps.RudderId
            })
            this.fetchTableData(nextProps.Id,nextProps.RudderId)
        }
    }

    // componentDidMount() {
    //     this.fetchTableData()
    // }

    tableAction = (actionKey, item) => {
    }


    render() {
        const {
            modalKey,
            visible,
            title,
            onCancel,
            width,
        } = this.props
        return (
            <Modal
                wrapClassName="form"
                key={modalKey}
                visible={visible}
                title={title}
                onCancel={onCancel}
                footer={null}
                width={width}
            >
            <div id="wrap">
                <div className="tableBox">
                    <div style={{ paddingTop: 10 }}>
                        <Table
                            onCtrlClick={ this.tableAction }
                            pagination={ true }
                            pageSize={10}
                            header={ columns }
                            data={ this.state.tData }
                            loading={ this.state.loading }
                            scroll={{y: 385 }}
                        />
                    </div>
                </div>
            </div>
            </Modal>
        )
    }
}
